<template>
  <div style="height:100%;" ref="mainPage">
    <view-box ref="viewBox">
      <transition name="vux-pop-in">
        <keep-alive :include="pageReg">
          <router-view></router-view>
        </keep-alive>
      </transition>
      <div class="tabbar" v-if="!(this.$route.name=='Detail'||this.$route.name=='Pay')">
        <div :class="!leftSelect?'tabbar_item':'tabbar_item_select'" @click="navigatorTo('home')">
          <div class="tabbar_item_content_left">
            <i slot="icon" class="iconfont icon-cc-home"></i>
            <span>首页</span>
          </div>
        </div>
        <div class="tabbar_item_center" @click="navigatorTo('rank')">
          <span>投票排名</span>
        </div>
        <div
          :class="!rightSelect?'tabbar_item':'tabbar_item_select'"
          @click="navigatorTo('lesson')"
        >
          <div class="tabbar_item_content_right">
            <i slot="icon" class="iconfont icon-person"></i>
            <span>学校简介</span>
          </div>
        </div>
      </div>
    </view-box>
  </div>
</template>

<script>
import { ViewBox } from "vux";
export default {
  components: {
    ViewBox
  },
  data() {
    return {
      pageReg: /(lessonPage|rankPage|homePage)/,
      rightSelect: false,
      leftSelect: true
    };
  },
  created(){
this.$root.$on("navigatorTo",(e)=>{
  this.navigatorTo(e)
})
  },
  methods: {
    navigatorTo(val) {
      switch (val) {
        case "home":
          this.leftSelect = true;
          this.rightSelect = false;
          this.$router.push({ path: "/home" });
          break;
        case "lesson":
          this.leftSelect = false;
          this.rightSelect = true;
          this.$router.push({ path: "/lesson" });
          break;
        case "rank":
          this.leftSelect = false;
          this.rightSelect = false;
          this.$router.push({ path: "/rank" });
          break;
        default:
          break;
      }
    }
  },
};
</script>
<style scoped>
.vux-pop-out-enter-active,
.vux-pop-out-leave-active,
.vux-pop-in-enter-active,
.vux-pop-in-leave-active {
  will-change: transform;
  transition: all 400ms;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  perspective: 1000;
}
.vux-pop-out-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.vux-pop-out-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.vux-pop-in-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.vux-pop-in-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.tabbar {
  position: fixed;
  height: 50px;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgb(255, 255, 255);
  display: flex;
  align-items: flex-end;
}
.tabbar_item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  flex: 1;
  color: #999999;
}
.tabbar_item_select {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  flex: 1;
  color: #f38ec8;
}
.tabbar_item_center {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 24px;
  margin: auto;
  height: 78px;
  width: 80px;
  background-image: url("./assets/home/pm_icon@3x.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.tabbar_item_center > span {
  font-size: 11px;
  padding-bottom: 4px;
  color: #ffffff;
  font-weight: 500;
  letter-spacing: 1px;
}
.tabbar_item_content_left {
  padding-right: 30px;
}
.tabbar_item_content_left_select {
  padding-right: 30px;
}
.tabbar_item_content_right {
  padding-left: 30px;
}
</style>
